<template>
    <view class="credit u-flex u-row-between u-row-center" v-show="show" @click="gotoMyCredit">
        <view class="credit-head">
            <u-image src="/static/icon/10044.png" width="50" height="50"></u-image>
            <text class="u-margin-left-20">授信</text>
        </view>
        <view>
            <view v-if="hasSign" class="u-flex u-flex-align-center">
                <view class="u-margin-right-20 credit-num" v-if="showMoney">
                    <view>{{ Number(creditNum).toFixed(2) }}</view>
                </view>
                <view class="u-margin-right-20 icon icon-hide" v-else>&#xe64c;&#xe64c;&#xe64c;&#xe64c;&#xe64c;&#xe64c;</view>
                <view class="u-padding-20" @click.stop="change">
                    <view class="icon" v-show="!showMoney">&#xe7aa;</view>
                    <view class="icon" v-show="showMoney">&#xe7ab;</view>
                </view>
                <view class="icon icon-right" v-if="showArrow"></view>
            </view>
            <view v-else @click.stop="$u.$MRouter.handleCredit.to()" class="u-margin-right-20">待签约</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/store'

const userStore = useUserStore()

defineExpose({getCreditStatus})

defineProps<{
    showArrow?:boolean
}>()

const $u = ref<any>(uni.$u)

const show = ref(false)
/** 是否显示 金额 */
const showMoney = ref(false)
/** 是否已经授信签约 */
const hasSign = ref(false)

const creditNum = ref(0)

function getCreditStatus() {
    let para = {
        merchantId: userStore.userInfo?.merchantId
    }
    // 确认授信状态
    uni.$u.$api.MerchantApi.getCreditStatus(para).then((res: any) => {
        if (res) {
            show.value = true
            if (res && res.creditStatus === 3) {
                hasSign.value = true
                creditNum.value = res.creditLine - (res.usedAmount ? res.usedAmount : 0)
            }
        } else {
            show.value = false
        }
        // 后续需要添加其它状态 如已过期等
    })
}

function change(){
    showMoney.value = !showMoney.value
}

function gotoMyCredit() {
    if (!hasSign.value) {
        uni.$u.toast('请先签约完成!')
    } else {
        uni.$u.$MRouter.credit.to()
    }
}
</script>

<style lang="scss" scoped>
// 授信
.credit {
    height: 118rpx;
    border-radius: 10rpx;
    padding: 0 50rpx;
    font-size: 28rpx;
    background-color: $uni-bg-color;
    margin-top: 20rpx;

    &-head {
        display: flex;
        font-size: 30rpx;
        font-weight: 600;
    }

    // 授信额度
    &-num {
        font-size: 26rpx;
    }
    .icon-hide {
        font-size: 20rpx;
    }
}
</style>
